<template>
  <view class="detail">
    <view class="detail-title">
      <view class="detail-title-icon">
        <image :src="remarkItem.icon" mode="aspectFill" />
        <!-- <image src="../../static/jxd.jpg" mode="aspectFill" /> -->
      </view>
      <view class="detail-title-info">
        <view class="username">{{remarkItem.username}}</view>
        <view class="time">{{remarkItem.createTime}}</view>
      </view>
    </view>
    <view class="detail-content">
			<view class="row">
				<view class="col-name">
					美食名称
				</view>
				<view class="col-cotent">
					{{remarkItem.foodName}}
				</view>
			</view>
			<view class="row">
				<view class="col-name">
					美食评分
				</view>
				<view class="col-cotent">
					<uni-rate :readonly="true" size="14" v-model="remarkItem.score" />
				</view>
			</view>
			<view class="row">
				<view class="col-name">
					美食坐标
				</view>
				<view class="col-cotent">
					{{remarkItem.schoolName}}{{remarkItem.address}}
				</view>
			</view>
			<view class="row">
				<view class="col-name">
					美食评价
				</view>
				<view class="col-cotent">
					{{remarkItem.comments}}
				</view>
			</view>
      <swiper class="swiper"
              :indicator-dots="indicatorDots"
              :loop="true"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration">
          <swiper-item v-for="(item, index) in remarkItem.photo"
                      :key="index">
              <view class="swiper-item">
                  <image :src="item"
                      mode="aspectFill" />
              </view>
          </swiper-item>
      </swiper>

      <!-- <view class="food-name">{{remarkItem.foodName?remarkItem.foodName:'美食名称'}}</view>
      <view class="food-remark">
        <uni-rate :readonly="true"
                  size="14"
                  v-model="remarkItem.score" />
      </view>
      <view class="food-address">坐标：{{remarkItem.address?remarkItem.address:'美食坐标'}}</view>
      <view class="food-description">评价：{{remarkItem.description?remarkItem.description:'美食评价'}}</view> -->
    </view>
    <view class="detail-comment">
      <view class="comment-title">最新评论</view>
      <view class="comment-content"
            v-for="(item, index) in comments"
            :key="index">
        <comment-box
            @showReply="showReply"
            @reply="reply"
            :comments="item"
            @freshForce="freshForce">
        </comment-box>
      </view>
      <view class="no-data"
            v-if="comments.length===0">
        暂时还没有人评论哦~😊
      </view>
    </view>
    <!-- <detail-bottom :commentValue="commentValue"></detail-bottom> -->
    <view class="detail-bottom">
      <view class="detail-bottom-input"
            @click="reply(remarkItem)">
        <text>评论一下，交个朋友~</text>
        <uni-icons type="compose"
                   size="16"
                   color="#fa541c"></uni-icons>
      </view>
      <view class="detail-bottom-icons">
        <view class="detail-bottom-icons-box" @click="thumbUp">
          <uni-icons v-if="remarkItem.isAdmired === 0" type="heart"
                     size="22"
                     color="#fa541c"></uni-icons>
          <uni-icons v-if="remarkItem.isAdmired === 1" type="heart-filled"
            size="22"
            color="#fa541c"></uni-icons>
        </view>
      </view>
    </view>
    <!-- <chat-pop-up v-if="visible" ref="myChatPop"></chat-pop-up> -->
    <uni-popup ref="popup"
               type="bottom">
      <view class="popup-wrap">
        <view class="popup-header">
          <text class="popup-header-item"
                @click="handleCancel">取消</text>
          <text class="popup-header-item"
                @click="handleSubmit">发布</text>
        </view>
        <view class="popup-content">
          <textarea class="popup-textarea"
                    maxlength="200"
                    v-model="commentValue"
                    fixed
                    placeholder="请输入评论内容"></textarea>
          <view class="popup-count">{{commentValue.length}}/200</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
// FIXME：这个页面加载数据的时候没有loading
import { mapState } from "vuex"
import { uniRate, uniIcons, uniPopup, uniList, uniListItem } from "@dcloudio/uni-ui"
import { getDetail, getComments, addComment, dianzan, notLike} from "../../api/remark.js"
import { CommentBox } from "@/components/CommentBox"
export default {
  name: "detail",
  components: {
    uniRate,
    uniIcons,
    uniPopup,
		CommentBox,
		uniList,
		uniListItem
  },
  data() {
    return {
      id: 0,
      commentValue: "",
      images: [],
      remarkItem: {},
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      visible: false,
      comments: [],
      replyItem: {}
    };
  },
  onLoad: function (options) {
    this.id = options.id;
	this.getRemarkDetail();
	this.getComments();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    // 点赞
    thumbUp() {
      const data = {
				admirerId: this.userInfo.id,
				commentId: this.remarkItem.id,
				likedId: this.remarkItem.userId
			}
      if (this.remarkItem.isAdmired === 0) {
        // 点赞
        dianzan(data).then(res => {
          console.log(res)
          if(res.code === 200) {
            this.remarkItem.isAdmired = 1
            uni.showToast({
              title: res.message,
              duration: 500
            })
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            })
          }
        })
      } else {
        // 取消
        notLike(data).then(res => {
            console.log(res)
            if(res.code === 200) {
              this.remarkItem.isAdmired = 0
              uni.showToast({
                title: res.message,
                duration: 500
              })
            } else {
              uni.showToast({
                title: res.message,
                icon: 'none'
              })
            }
        })
      }
    },
    // 弹出回复框
    showReply() {
      this.visible = true;
      this.$refs.myChatPop && this.$refs.myChatPop.open();
    },
    // 获取点评详情
    getRemarkDetail() {
      const data = {
        id: this.id,
        currentUserId: this.userInfo.id,
      };
      getDetail(data).then((res) => {
        if (res.code !== 200) {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
          uni.hideLoading();
          return;
        }
        this.remarkItem = res.data;
        this.images.push(res.data.photo)
      });
    },
    // 获取评论详情
    getComments() {
      const data = { commentId: this.id };
      getComments(data).then((res) => {
        if (res.code !== 200) {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
          return;
        }
        if (res.data !== null) {
          this.comments = res.data;
        }
      });
    },
    reply(comment) {
      this.replyItem = comment
	    console.log('我是index里的reply里的replyItem', this.replyItem)
      this.openPopup()
    },
    freshForce() {
      console.log('freshForce')
      this.getComments()
    },
    // 打开popup
    openPopup() {
      this.$refs.popup.open();
    },
    // 关闭popup
    handleCancel() {
      this.$refs.popup.close();
    },
    // 提交评论
    handleSubmit() {
      const data = {}
      console.log(this.replyItem.schoolId)
      if (this.replyItem.schoolId) {
        console.log('有学校id')
        data.parentId = 0
        data.commentUserId = this.replyItem.userId
        data.commenterId = this.userInfo.id
        data.commentId = this.remarkItem.id
        data.content = this.commentValue
      } else {
        console.log('无学校id')
        data.parentId = this.replyItem.id
        data.commenterId = this.userInfo.id
        data.commentUserId = this.replyItem.commenterId
        data.content = this.commentValue
        data.commentId = this.remarkItem.id
      }
      console.log(data)
      if (!this.commentValue) {
        return uni.showToast({
          title: '请填写评论内容后发布',
          duration: 2000,
          icon: 'none'
        });
      }
      addComment(data).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: res.message,
          });
        } else {
          uni.showToast({
            title: res.message,
          });
        }
		    console.log('我是index里的发布评论')
        this.commentValue = ""
        this.$refs.popup.close()
        this.getComments()
      })
    },
  },
};
</script>

<style lang='scss'>
page {
  background-color: #f5f5f5;
}
.detail {
  padding: 15px;
  height: 100%;
  .detail-title {
		background-color: #ffffff;
		padding: 10px;
		display: flex;
    .detail-title-icon {
			width: 40px;
			height: 40px;
			margin-right: 15px;
      image {
				height: 100%;
				width: 100%;
				border-radius: 50%;
      }
    }
    .detail-title-info {
      .username {
				color: #333;
				font-size: 14px;
      }
			.time {
				color: #999;
				font-size: 10px;
				padding-top: 10px;
			}
    }
  }
  .detail-content {
		background-color: #ffffff;
		padding: 10px;
		display: flex;
		flex-direction: column;
		.row {
			display: flex;
			padding-bottom: 15px;
      flex-wrap: wrap;
			.col-name {
        width: 140rpx;
        margin-right: 20rpx;
        color: #333;
			}
      .col-cotent {
        width: 420rpx;
        color: #666;
      }
		}
  }
  .detail-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    border-top: 1px #f5f5f5 solid;
    background-color: #ffffff;
    box-sizing: border-box;
    .detail-bottom-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 10px;
      padding: 0 10px;
      width: 100%;
      height: 30px;
      border: 1px #dddddd solid;
      border-radius: 5px;
      text {
        font-size: 14px;
        color: #999;
      }
    }
    .detail-bottom-icons {
      display: flex;
      flex-shrink: 0;
      padding: 0 10px;
      .detail-bottom-icons-box {
        position: relative;
        display: flex;
        align-items: center;
        width: 44px;
        justify-content: center;
      }
    }
  }
  .detail-comment {
    background-color: #ffffff;
    padding-bottom: 54px;
    margin-top: 20px;
    .no-data {
      padding: 10px 15px;
      font-size: 14px;
      color: #666;
      border-bottom: 1px #f5f5f5 solid;
    }
    .comment-title {
      padding: 10px 15px;
      font-size: 14px;
      color: #666;
      border-bottom: 1px #f5f5f5 solid;
    }
    .comment-content {
      padding: 0px 15px;
      border-top: 1px #eee solid;
    }
  }
  .popup-wrap {
    background-color: #ffffff;
    .popup-header {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      border-bottom: 1px #f5f5f5 solid;
      .popup-header-item {
        height: 50px;
        line-height: 50px;
        padding: 0 15px;
      }
    }
    .popup-content {
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
      .popup-textarea {
        width: 100%;
        height: 200px;
      }
      .popup-count {
        display: flex;
        justify-content: flex-end;
        color: #999;
        font-size: 12px;
      }
    }
  }
}
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-BAIDU */
@font-face {
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  src: url("~@/static/uni.ttf") format("truetype");
}
</style>
